<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			[class*="col"]{
				border: 1px solid #ffffff;
				background-color: #eee;
			}
		</style>
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="css/bootstrap.css">
		
		<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
		<link rel="stylesheet" href="css/bootstrap-theme.css" >
		<!-- bootstrap需要jquery支持 -->
		<script src="../517/js/jquery-1.11.1.min.js"></script>
		
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="js/bootstrap.min.js" ></script>
	</head>
	<body>
		<div class="container">
			<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
			<button type="button" class="btn btn-default" aria-label="Left Align">
			  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
			</button>
			
			<button type="button" class="btn btn-default btn-lg">
			  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
			</button>
			<hr>
			<div class="dropup">
			  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			    Dropup
			    <span class="caret"></span>
			  </button>
			  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
			    <li><a href="#">Action</a></li>
			    <li><a href="#">Another action</a></li>
			    <li><a href="#">Something else here</a></li>
			    <li role="separator" class="divider"></li>
			    <li><a href="#">Separated link</a></li>
			  </ul>
			</div>
			
			<!-- Single button -->
			<div class="btn-group">
			  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			    Action <span class="caret"></span>
			  </button>
			  <ul class="dropdown-menu">
			    <li><a href="#">Action</a></li>
			    <li><a href="#">Another action</a></li>
			    <li><a href="#">Something else here</a></li>
			    <li role="separator" class="divider"></li>
			    <li><a href="#">Separated link</a></li>
			  </ul>
			</div>
			<hr>
			<div class="input-group">
			  <span class="input-group-addon" id="basic-addon1">@</span>
			  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
			</div>
			
			<div class="input-group">
			  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
			  <span class="input-group-addon" id="basic-addon2">@example.com</span>
			</div>
			
			<div class="input-group">
			  <span class="input-group-addon">$</span>
			  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
			  <span class="input-group-addon">.00</span>
			</div>
			
			<label for="basic-url">Your vanity URL</label>
			<div class="input-group">
			  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
			  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
			</div>
			
		</div>
	</body>
</html>